<%@ page contentType="text/html;charset=UTF-8" language="java"  import="java.util.*" trimDirectiveWhitespaces="true" %>
<%@include file="/WEB-INF/pages/common/taglib.jsp"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <title>检测报告编辑</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <%@include file="/WEB-INF/pages/common/commonCss.jsp"%>

    <link rel="stylesheet" href="${basePath}/resources/css/select2.css" />
    <link rel="stylesheet" href="${basePath}/resources/css/matrix-style.css" />
    <link rel="stylesheet" href="${basePath}/resources/css/matrix-media.css" />
    <link rel="stylesheet" href="${basePath}/resources/css/bootstrap-wysihtml5.css" />
    <link rel="stylesheet" href="${basePath}/resources/css/admin/liandong.css" />

</head>
<style>
    .select2-container {
        float:left;
        width: 35%;
    }
    .controls.marb5 img{
        margin-bottom:5px;
    }
    label {
        display: inline-block;
        padding-right: 1rem;
    }
    .text-min{
        width: 56px;
    }
    .parent{
        height:150px;
        width:150px;
        display: inline-block;
        position:relative;
        border:1px solid #999;
        overflow: hidden;
        text-align: center;
    }
    .parent .shadow{
        position: absolute;
        height:30px;
        width:150px;
        display: inline-block;
        background: rgba(0,0,0,0.5);
        left:0;
        bottom:-33px;
        transition: all 0.7s ease;
        font-size:2rem ;
    }
    .parent .shadow .minus{
        line-height:30px;
        color:red;
        float: right;
        font-weight: 900;
        cursor: pointer;
        padding: 0 0.5rem;
    }
    .parent:hover .shadow{
        bottom:0;
        transition: all 0.5s ease;
    }
</style>
<body>

<!--Header-part-->
<%@include file="/WEB-INF/pages/common/head.jsp"%>


<!--sidebar-menu-->
<%@include file="/WEB-INF/pages/common/left.jsp"%>

<div id="content">
    <div id="content-header">
        <div id="breadcrumb"> <a href="#" title="Go to Home" class="tip-bottom"><i class="icon-home"></i> </a>
            <a href="#" class="current">检测报告编辑</a> </div>
        <%--<h1>平台商品新增</h1>--%>
    </div>

    <div class="container-fluid">

        <div class="row-fluid">
            <div class="span12">
                <div class="widget-box">
                    <div class="widget-title"> <span class="icon"> <i class="icon-align-justify"></i> </span>
                        <h5></h5>
                    </div>
                    <div class="widget-content nopadding">
                        <form   id="form"  method="POST" class="form-horizontal" >
                            <input type="file" class="hidden" id="file" name="file"  accept="image/jpeg,image/png,image/gif,audio/mp3"  onchange="uploadFile()" />


                            <div class="control-group">
                                <label class="control-label">
                                    检测报告图(860*860):
                                    <label class="control-label">
                                        (最多5张)
                                        <%--<i class="icon-plus" style="margin-right: 1rem" onclick="good.addPicture()"></i>--%>
                                    </label>
                                </label>


                                <div class="controls marb5" >
                                    <c:forEach items="${pictures}" var="pic">
                                        <div class="parent">
                                            <input type="hidden" name="detailimgurl" value="${pic.imgurl}">
                                            <img data-img="${pic.imgurl}" style="height:150px;"  data-dir="good/images" src="${pic.imgurl}" alt="" width="150" height="150">
                                            <span class="shadow">
                                                <span class="minus iconfont icon-del" onclick="good.delPicture(this,'${pic.id}')"></span>
                                            </span>
                                        </div>
                                        <%--<img  data-img="${good.bannerurl}" onclick="openBrowse(this,1)" data-dir="good/images" src="${pic.imgurl}" alt="" width="150" height="150px">--%>
                                    </c:forEach>
                                </div>
                            </div>

                                <div class="control-group">
                                    <label class="control-label">报告内容（非必填）</label>
                                    <div class="controls">
                                        <textarea id="checkport" class="span10" name="checkreport" style="width:90%;height:100px;">${checkReport.checkreport}</textarea>
                                    </div>
                                </div>

                            <div class="form-actions">
                                <div class="control-group">
                                    <div class="controls">
                                        <button type="button" onclick="good.submit('${serviceId}')" class="btn btn-success">保存</button>
                                        <button type="reset" class="btn btn-default"  onclick="history.go(-1)">返回</button>
                                    </div>
                                </div>
                            </div>

                        </form>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>


<!-- Modal -->

</div>



<!--Footer-part-->
<%@include file="/WEB-INF/pages/common/footer.jsp"%>

<!--end-Footer-part-->

<%@include file="/WEB-INF/pages/common/commonJS.jsp"%>
<script src="${basePath}/resources/js/bootstrap.min.js"></script>
<script src="${basePath}/resources/js/kindeditor-4.1.10/kindeditor.js"></script>
<script src="${basePath}/resources/js/kindeditor-4.1.10/lang/zh_CN.js"></script>
<script src="${basePath}/resources/js/kindeditor-4.1.10/plugins/code/prettify.js"></script>
<script type="text/javascript" src="${basePath}/resources/js/upload/upload.js"></script>
<script type="text/javascript" src="${basePath}/resources/js/admin/liandong.js"></script>


<script>
    var good = {
        orderno:'${orderno}',
        type:'${type}',
        serviceId:'${serviceId}',
        delIds:[],//存放更改的图片id集合
        addImgs:[],//存放新增的图片
        ordertype:{'001':'refurbish','002':'repair','003':'testing','004':'recycle','005':'exchange'},
        submit:function (serviceId) {
            good.addImgs = [];
            var mark = false;
            $('input[type=hidden]').each(function (index, item) {
                console.log($(this).val());
                if($(this).val() && $(this).val().indexOf('http://')==-1){
                    good.addImgs.push($(this).val());
                }
                if($(this).val()) {
                    mark = true;
                    return;
                }
            });
            if(!mark){
               loading('请至少上传一张图片',3);
               return;
            }
            good.delIds.push(0);
            good.addImgs.push("0");
            var checkport = $("#checkport").val();
            var param = {delIds:good.delIds,addImgs:good.addImgs,serviceId:serviceId,checkreport:checkport,id:good.serviceId,type:good.type};
            $.ajax({
                url:adminPath+'/order/updateCheckport',
                type:'post',
                data:param,
                success:function (d) {
                    window.location.href =  adminPath +"/order/"+good.ordertype['${type}']+"/detail/"+'${orderno}';
                }
            });
        },
        delPicture:function (obj,id) {
            //获得这个图片的id,加入删除的数组
            if(id) {
                good.delIds.push(id);
            }
            //替换元素
            var parent =  $(obj).parent().parent('.parent');
            parent.html("<input type='hidden' name='detailimgurl'> "+
               " <img   style='height:150px;' onclick='openBrowse(this,1)' data-dir='good/images'  src='${basePath}/resources/images/noimage.gif' alt='' width='150' >");
        },
        limitPicture:function () {
            var len=  $('.marb5 .parent').length;
            console.log('==='+len);
            if(parseInt(len)<5){
                var html='';
                for(var i=0,llen=5-len;i<llen;i++){

                    html+= "  <div class='parent'>"+
                        "  <input type='hidden' name='detailimgurl'>"+
                        "   <img style='height:150px;' onclick='openBrowse(this,1)' data-dir='good/images' src='${basePath}/resources/images/noimage.gif' alt='' width='150'>"+
                        " </div>";
                }
                $('.marb5').append(html);
            }
        }
    };



    function tz_uploadsuccess(jdata ,obj) {
        if (jdata.target ==0) {
            console.log(JSON.stringify(jdata.name) );
            $(obj).attr("src", basePath + "/" + jdata.url + "?" + new Date().getTime()).css({width:300,height:300});
            $(obj).prev().val(JSON.stringify(jdata.name));
            $(obj).parent().append("<span class='shadow'>"+
                "      <span class='minus iconfont icon-del' onclick='good.delPicture(this)'></span>"+
                " </span>");
            console.log($(obj).parent());
//          $("#bannerurl").val(JSON.stringify(jdata.name));
        }else if (jdata.target ==1) {
            console.log(JSON.stringify(jdata.name) );
            $(obj).attr("src", basePath + "/" + jdata.url + "?" + new Date().getTime()).css({width:150,height:150});
            $(obj).prev().val(JSON.stringify(jdata.name));
            $(obj).parent().append("<span class='shadow'>"+
                "      <span class='minus iconfont icon-del' onclick='good.delPicture(this)'></span>"+
                " </span>");
//          $("#bannerurl").val(JSON.stringify(jdata.name));
        }else if (jdata.target ==2) {
            console.log(JSON.stringify(jdata.name) );
            $(obj).attr("src", basePath + "/" + jdata.url + "?" + new Date().getTime()).css({width:180,height:101});
            $(obj).prev().val(JSON.stringify(jdata.name));
            //          $("#bannerurl").val(JSON.stringify(jdata.name));
        }
        else if (jdata.target == "#audio") {
            $(jdata.target).attr("src", basePath + "/" + jdata.url).data("link", jdata.url);
            $("#musictitle").val(jdata.name);
            $("#musicsize").val(jdata.size);
            $("#musiclink").val(jdata.url);
            adminBlog.audioDom.oncanplaythrough = function () {
                var time = this.duration;
                var m = Math.ceil(time / 60);
                var s = Math.ceil(time % 60);
                if (m < 10) m = "0" + m;
                if (s < 10) s = "0" + s;
                $("#musictime").val(m + ":" + s);
            }
        }
    }

    $(function () {
        imgerr.init();
        good.limitPicture();
    })
</script>

</body>
</html>
